<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta charset="utf-8" />
	<title>树状结构</title>
	<meta name="description" content="Common UI Features &amp; Elements" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
	<link rel="stylesheet" href="/BaseFrame/TopJUI/tree/css/font-awesome.min.css"/>
	<link rel="stylesheet" href="/BaseFrame/TopJUI/tree/css/ace.min.css" id="main-ace-style" />
	<script src="/BaseFrame/TopJUI/tree/js/ace-extra.min.js"></script>
	<script src="/BaseFrame/TopJUI/tree/js/jquery.min.js"></script>
	<script src="/BaseFrame/TopJUI/tree/js/fuelux.tree-sample-demo-data.js"></script>
	<script src="/BaseFrame/TopJUI/tree/js/fuelux.tree.min.js"></script>
	<script src="/BaseFrame/TopJUI/tree/js/ace-elements.min.js"></script>
	
	<script type="text/javascript">
	jQuery(function($){
		$('#tree1').ace_tree({
			dataSource: treeDataSource ,
			multiSelect:true,
			loadingHTML:'<div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div>',
			'open-icon' : 'ace-icon tree-minus',
			'close-icon' : 'ace-icon tree-plus',
			'selectable' : true,
			'selected-icon' : 'ace-icon fa fa-check',
			'unselected-icon' : 'ace-icon fa fa-times'
		});

		$('#tree2').ace_tree({
			dataSource: treeDataSource2 ,
			loadingHTML:'<div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div>',
			'open-icon' : 'ace-icon fa fa-folder-open',
			'close-icon' : 'ace-icon fa fa-folder',
			'selectable' : false,
			'selected-icon' : null,
			'unselected-icon' : null
		});
		$('#tree1').on('updated', function(e, result) {})
		.on('selected', function(e) {
		})
		.on('unselected', function(e) {
		})
		.on('opened', function(e) {
		})
		.on('closed', function(e) {
		});
});
</script>
</head>
<body class="no-skin">
		<div id="tree1" class="tree" style="width: 300px"></div>
</body>
</html>